<template>
	<div class="app-edit resource-edit">
		<div class="h-panel">
			<div class="h-panel-bar">
				<span class="h-panel-title">编辑类目</span>
				<span class="h-panel-right"><a @click="close"><i class="icon guanbi"></i></a></span>
			</div>
			<div class="h-panel-body">
				<Form mode="twocolumn">
					<FormItem label="类目名称">
						<input type="text" v-model="data.name" placeholder="请填写类目名称"/>
					</FormItem>
					<FormItem label="类目图标">
						<Upload v-model="data.pic"></Upload>
					</FormItem>
					<FormItem label="上级类目">
						<CategoryPicker placeholder="为空时表示顶级类目" :option="{keyName:'id',titleName:'name',parentName:'fid',dataMode:'list',getTotalDatas:(resolve)=>{$global.categoryBug(resolve,cate)}}" v-model="data.fid"></CategoryPicker>
					</FormItem>
					<FormItem label="类目权重">
						<input type="text" v-model="data.rank" placeholder="权重影响排序,默认为0"/>
					</FormItem>
					<FormItem label="产品表单">
						<Select v-model="data.form_id" :datas="$global.config.forms"></Select>
					</FormItem>
					<FormItem label="订单表单">
						<Select v-model="data.order_form_id" :datas="$global.config.forms"></Select>
					</FormItem>
				</Form>
			</div>
			<div class="h-panel-body" style="text-align: center;">
				<Button color="primary" :loading="loading" @click="submit">提交</Button>
				<Button @click="close">取消</Button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		id: Number,
		cate: Array
	},
	data() {
		return {
			loading: false,
			data: {}
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		async getData() {
			this.loading = true
			if(this.id > 0){
				this.data = await this.$api('GET','cate/'+this.id)
			}
			this.loading = false
		},
		async submit (){
			let res = ''
			this.loading = true
			if(this.id > 0){
				res = await this.$api('PUT','cate/'+this.id,this.data)
			}else{
				res = await this.$api('POST','cate',this.data)
			}
			this.loading = false
			if(res){
				this.close()
			}
		},
		close (){
			this.$emit('close')
		}
	}
};
</script>

<style lang="less">
	.resource-edit{
		.h-form-item-wrap{
			display: flex;
			div{
				width: 100%;
			}
		}
		.h-switch{
			margin-left: 10px;
			width:120px;
		}
	}
</style>